<template>
  <!-- 获取群二维码 -->
  <div class="qrcode-container">
    <div class="backbar">
      <div class="back flex-center" v-hammer:tap="(ev) => $router.push({name: 'GroupSetting'})">
        <i class="fa fa-angle-left fa-lgl"></i>
        <span>返回</span>
      </div>
    </div>
  <div class="group-container">
    
    <div class="qrcode-wrapper">
      <div class="info flexbox justify-center">
        <div class="info-item head">
          <img :src="groupSetting.managerInfo.headUrl" alt="" class="head-url">
        </div>
        <div class="info-item basic-info flexbox column justify-around">
          <div class="group-owner">
            <span class="owner-name">{{ groupSetting.managerInfo.nickname }}</span>
            <!-- <span>
              <i class="fa gender-icon" :class="`fa-${groupSetting.managerInfo.userSex === 1 ? 'male' : 'female'}`"></i>
            </span> -->
          </div>
          <!-- <div class="group-level">
            <span>头衔</span>
            <span>{{ groupSetting.managerInfo.role | Role }}</span>
          </div> -->
          <div class="group-id">
            <!-- <span>积分: {{ groupSetting.managerInfo.bonus }} </span> -->
            <span>ID: {{ groupSetting.managerInfo.userId }}</span>
          </div>
        </div>
      </div>

      <div class="qrcode-image">
        <!-- <img :src="qrUrl" alt=""> -->
        <qrcode tag="img" :value="qrUrl" :options="{ width: 200 }"/>
      </div>

      <!-- <div class="tip">
        点击二维码部分, 可上传自己的二维码
      </div> -->
      <div class="tip">
        长按二维码分享
      </div>
    </div>

    <!-- <div class="action flexbox justify-center">
      <div class="upload-qrcode">
        <span>上传二维码</span>
        <input type="file" accept="image/*" class="file-input" @change="onImageChange" />
      </div>
    </div> -->

  </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Mutation, Getter, namespace } from 'vuex-class';
import { RawLocation } from "vue-router";
import { MsgTypeKV } from '@/api/socket/imClient';
import MessageMixin from '@/mixins';
import { Webim } from '@/utils/types';
declare const $Vue: Vue;
declare const webim: Webim;
const chatModule = namespace('chatModule');
const userModule = namespace('userModule');


@Component<GroupQrcode>({
  mixins: [MessageMixin],
})
export default class GroupQrcode extends Vue {
  @chatModule.State("groupSetting") groupSetting: any;

  private eventList: Array<string> = [
    "$getGroupQrcode",
  ];

  private status: boolean = true;

  private group: any = {
  };

  private qrUrl: string = 'http://lefantian.jiahuagame.com';

  // 能否进行编辑
  private allowEdit: boolean = false;

  /**
   * 生命周期函数
   */
  protected mounted() {
    this.initEvents(this.eventList);

    this.allowEdit = (this.groupSetting.status === 1 || this.groupSetting.status === 2);

    this.getQrcode();
  }

  /*
   * 选取图片用于发送
   */
  private onImageChange(ev: any) {
    let file = ev.target.files[0];
  }

  private handleImageFile(file: File) {
    const reader = new FileReader();
    // 使用base64上传
    reader.onload = (ev: any) => {
      // this.imageBase64 = ev.target.result;
    };
    reader.readAsDataURL(file);
  }


  /**
   * 获取已有的二维码
   */
  private getQrcode() {
    this.sendMessage(MsgTypeKV.getGroupQrcode);
  }

  /**
   * 上传二维码
   */
  private uploadQrcode() {

  }

  /**
   * 获取群成员列表
   */
  private $getGroupQrcode(data: any) {
    if (data.result === 0) {
      this.qrUrl = data.qrUrl;
    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }
}
</script>

<style lang="stylus" scoped>
.qrcode-container
  background #efefef
.group-container
  width 100%
  height 100%
  background #efefef
  padding 24px
  box-sizing border-box
  .qrcode-wrapper 
    background white
    padding 24px
    .info
      display flex
      .head 
        flex-basis 18%
        .head-url 
          width 100%
          border-radius 8px
      .basic-info
        flex-basis 82%
        padding-left 16px
        .group-level, .group-id
          color #898989
          text-align left
          font-size 14px
        .group-owner
          text-align left
    .qrcode-image
      height 300px
      img 
        width 90%
        // height 90%
  .action
    margin-top 36px
    .upload-qrcode 
      background #e64340
      width 120px
      height 36px
      line-height 36px
      border-radius 8px
      color white
      position relative
      input
        position absolute
        width 100%
        height 100%
        top 0
        left 0
        opacity 0
.gender-icon
  font-size 18px
  &.fa-male
    color #940592;
  &.fa-female
    color #f44778

.owner-name
  display inline-block
  margin-right 18px
</style>

